<template>
	<el-dialog v-model="dialogVisible" title="选择挂载方式" width="50%" :modal="false">
		<div>
			<el-card size="mini">
				<el-row :gutter="10" justify="center">
					<el-col :span="8">
						<div :class="selectedMethod === 1 ? 'img-selected' : 'img-unselect'" @click="selectImg(1)">
							<div class="css-1awpln7">
								<div class="css-0">
									<img alt="" src="/@/assets/ai/link.svg" class="chakra-image css-0">
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div :class="selectedMethod === 2 ? 'img-selected' : 'img-unselect'" @click="selectImg(2)">
							<div class="css-1awpln7">
								<div class="css-0">
									<img alt="" src="/@/assets/ai/iframe.svg" class="chakra-image css-0" />
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div :class="selectedMethod === 3 ? 'img-selected' : 'img-unselect'" @click="selectImg(3)">
							<div class="css-1awpln7">
								<div class="css-0">
									<img alt="" src="/@/assets/ai/script.svg" class="chakra-image css-0">
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<div style="margin: 2px 0 2px 0">
			<el-card size="mini" v-if="selectedMethod === 3">
				<el-form label-width="auto" :inline="true">
					<el-row :gutter="20">
						<el-col :span="12" class="mb20">
							<el-form-item label="打开图标">
								<el-upload action="#" :before-upload="handleOpenIconBeforeUpload" list-type="text">
									<div>
										<Upload style="width: 1.5em; height: 1.5em; margin-right: 8px" v-if="!openImageBase64" />
										<img style="width: 1.5em; height: 1.5em" :src="openImageBase64" alt="" v-if="openImageBase64" />
									</div>
								</el-upload>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="关闭图标">
								<el-upload action="#" :before-upload="handleCloseIconBeforeUpload" list-type="text">
									<div>
										<Upload style="width: 1.5em; height: 1.5em; margin-right: 8px" v-if="!closeImageBase64" />
										<img style="width: 1.5em; height: 1.5em" :src="closeImageBase64" alt="" v-if="closeImageBase64" />
									</div>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" class="mb20">
							<el-form-item label="按钮水平边距(px)">
								<el-input-number v-model="data_btn_x" :min="0" :max="1000" />
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="按钮垂直边距(px)">
								<el-input-number v-model="data_btn_y" :min="0" :max="1000" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12" class="mb20">
							<el-form-item label="按钮水平位置">
								<el-select v-model="data_direction_x" placeholder="Select" class="!w-[120px]">
									<el-option v-for="item in left_right" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="按钮垂直位置">
								<el-select v-model="data_direction_y" placeholder="Select" class="!w-[120px]">
									<el-option v-for="item in top_bottom" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
		</div>
		<div>
			<el-card size="mini" body-class="card-class">
				<template #header>
					<div class="card-header">
						<div v-if="selectedMethod === 1">
							<span>将下面链接复制到浏览器打开</span>
							<span>
								<el-button style="float: right" class="ml-2" type="primary" @click="openText(url())">打开</el-button>
								<el-button style="float: right" type="primary" @click="copyText(url())">复制</el-button>
							</span>
						</div>
						<div v-if="selectedMethod === 2">
							<span>复制下面 Iframe 加入到你的网站中</span>
							<span>
								<el-button style="float: right" type="primary" @click="copyText(iframe())">复制</el-button>
							</span>
						</div>
						<div v-if="selectedMethod === 3">
							<span>将下面代码加入到你的网站中</span>
							<span>
								<el-button style="float: right" type="primary" @click="copyText(script())">复制</el-button>
							</span>
						</div>
					</div>
				</template>
				<span v-if="selectedMethod === 1">
					<div class="mockup-code">
						<pre data-prefix="$"><code> {{ url() }}</code></pre>
					</div>
				</span>
				<span v-if="selectedMethod === 2">
					<div class="mockup-code">
						<pre data-prefix="$"><code> {{ iframe() }}</code></pre>
					</div>
				</span>
				<span v-if="selectedMethod === 3">
					<div class="mockup-code">
						<pre data-prefix="$"><code> {{ script() }}</code></pre>
					</div>
				</span>
			</el-card>
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="AiDatasetDialog">
import commonFunction from '/@/utils/commonFunction';

const emit = defineEmits(['refresh']);
const { copyText } = commonFunction();

const left_right = [
	{
		label: '左侧',
		value: 'left',
	},
	{
		label: '右侧',
		value: 'right',
	},
];

const top_bottom = [
	{
		label: '顶部',
		value: 'top',
	},
	{
		label: '底部',
		value: 'bottom',
	},
];
const dialogVisible = ref(false);
const selectedDatasetId = ref();
const selectedMethod = ref(1);
const data_btn_x = ref(16);
const data_btn_y = ref(16);
const data_stream = ref(true);
const data_direction_x = ref('right');
const data_direction_y = ref('bottom');
const openDialog = (datasetid: any) => {
	dialogVisible.value = true;
	selectedDatasetId.value = datasetid;
};

const currentHostname = window.location.origin;
const openImageBase64 = ref('');
const closeImageBase64 = ref('');

function handleOpenIconBeforeUpload(file: Blob) {
	const reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = (e) => {
		// 在这里处理 Base64 数据
		openImageBase64.value = e.target.result;
	};
	return false;
}

function handleCloseIconBeforeUpload(file: Blob) {
	const reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = (e) => {
		// 在这里处理 Base64 数据
		closeImageBase64.value = e.target.result;
	};
	return false;
}

const isMicro = import.meta.env.VITE_IS_MICRO === 'true';

const script = () => {
	return `<script id="chatbot-iframe" src="${currentHostname}/bot/iframe.js?t=${new Date().getTime()}" data-dataset-id="${
		selectedDatasetId.value
	}" data-bot-src="${currentHostname}/bot/index.html" data-open-icon="${openImageBase64.value}" data-close-icon="${
		closeImageBase64.value
	}" data-btn-y="${data_btn_y.value}" data-btn-x="${data_btn_x.value}" data-stream="${data_stream.value ? 1 : 0}" data-micro="${
		isMicro ? 1 : 0
	}" async defer><\/script>`;
};

const iframe = () => {
	return `<iframe src="${currentHostname}/bot/index.html?datasetId=${selectedDatasetId.value}&micro=${
		isMicro ? 1 : 0
	}" style="width: 100%; height: 100%;" frameborder="0" allow="microphone"/>`;
};

const url = () => {
	return `${currentHostname}/bot/index.html?datasetId=${selectedDatasetId.value}&micro=${isMicro ? 1 : 0}`;
};
const selectImg = (index: number) => {
	selectedMethod.value = index;
};

const openText = (url: string) => {
	window.open(url);
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped>
.img-unselect {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	border: 1.5px solid rgb(232, 235, 240);
	border-radius: 5px;
	position: relative;
	background: #fbfbfc;
	padding: 0px !important;
}

.img-unselect:hover {
	border-color: #1dbcd8;
}

.img-selected {
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	border-style: solid;
	border-image: initial;
	border-width: 1.5px;
	border-radius: 5px;
	position: relative;
	border-color: #1dbcd8;
	background: #f0f4ff;
	padding: 0px !important;
}

.card-class {
	background-color: #f4f4f7;
}
</style>
